<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="../../favicon.ico"> -->
    <title>Research Show Time</title>
   
    <link href="../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/public.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Research WoW</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container res-detail">
      
      <!-- 
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>
      -->
      <div class="res-bread-nav">
          <ol class="breadcrumb">
            <li><a href="index.html">Home</a></li>
            <li><a href="javascript:history.back(-1);">List</a></li>
            <li class="active">Detail</li>
          </ol>  
      </div>
      
      <div class="track-list">
                      
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../libs/jquery.min.js"></script>
    <script src="../libs/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    var UrlParams = {};
    (function(){
      var i, aParams = document.location.search.substr(1).split('&'), aParam;
      for (i=0; i<aParams.length; i++){
        aParam = aParams[i].split('=');
        if (aParam[0].length > 0) {
          UrlParams[aParam[0]] = decodeURIComponent(aParam[1]);
        } 
      }
    })();

    var dataList;

    $(function(){

        $.ajax({
            "url":"/list/"+UrlParams.parentId+"/"+UrlParams.id+"?_t="+new Date().getTime(),
            dataType:'json',
            success:function(data){
                dataList = data.face_list;
                _dealAttrData(data);
                _initEvent();
            }
        });
    })
    function _initEvent(){
        $('.toggleShow').on('click',function(){
            var dealSig = $(this).find('.glyphicon');
            dealSig.toggleClass('glyphicon-minus glyphicon-plus');
            $(this).siblings('.panel-body')[(dealSig.hasClass('glyphicon-minus')?'slideDown':'slideUp')]();
        });
        $('[data-toggle="tooltip"]').tooltip({
            'placement': function(tooltip,dom){

              var react = $(dom)[0].getBoundingClientRect();
              console.log(react);
              if(react&&react.right){
                  if($(window).width()-react.right-300>0){
                    return 'right';
                  }else if(react.left&&react.left<300){
                    return 'top';
                  }else{
                    return 'left';
                  }  
              }
              return 'right';
              
            },
            'html':true,
            'title':function(){
                var num = $(this).data('index');
                var dealData = dataList&&dataList[num] || {};
                if(dealData){
                  delete dealData.image_path;
                  delete dealData.landmarks;
                  delete dealData.track_id;
                }
                return '<pre>'+JSON.stringify(dealData,null,2)+'</pre>';
            }
        });
     }
    function _dealAttrData(data){
        var trackIds = data.track_id||[];
        var faceList = data.face_list||[];
        var str = "";
        $.each(trackIds,function(i,track){
            str += '<div class="panel panel-primary">\
            <div class="panel-heading toggleShow">\
              <h3 class="panel-title ">track:'+track+'<span class="faceNum"></span>'
               +'<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>\
              </h3></div><div class="panel-body track_'+track+'"></div></div>';
        });
        $('.track-list').append(str);

        $.each(faceList,function(i,face){
            var itemStr = '';
            itemStr +='<div data-index="'+i+'" class="imgWrap ' + (face.avaliable?'itemWarn':'') + '" data-toggle="tooltip"   >\
                <span  style="background:url('+face.image_path+') center no-repeat;background-size:contain;" ></span></div>';
            
            //itemStr += _dealItemAttr(face);
            //itemStr += '</div>';
            $('.track_'+face.track_id).append(itemStr);
        });
        $('.faceNum').each(function(i,dom){
            var totalNum = $(dom).closest('.panel-heading').siblings('.panel-body').find('.imgWrap').length;
            $(dom).text('（'+totalNum+'）');
        });
        
    }
    function _dealItemAttr(obj){
        var str = "";
        if(!obj)return;
        $.each(obj,function(key,value){
            if(key=='image_path'||key=='landmarks'||key=="track_id"){
                return true;
            }else{
              str += '<p>'+key+':'+JSON.stringify(value)+'</p>';  
            }
        }); 
        return str;
    }

    </script>
  </body>
</html>
